<template>
    <div class="rich-text-layout">
        <div class="rich-title-part">
            <img v-if="taskObj.type==='warning'" src="../assets/task_warnning_icon.png"
                 class="rich-logo-part"
                 alt="">
            <img v-else-if="taskObj.type==='inspection'" src="../assets/task_inspecion_icon.png"
                 class="rich-logo-part"
                 alt="">
            <img v-else-if="taskObj.type==='commodity'" src="../assets/task_supplies_icon.png"
                 class="rich-logo-part"
                 alt="">
            <img v-else-if="taskObj.type==='voucher'" src="../assets/task_voucher_icon.png"
                 class="rich-logo-part"
                 alt="">
            <img v-else-if="taskObj.type==='message'" src="../assets/task_system_msg.png"
                 class="rich-logo-part"
                 alt="">
            <div class="left-sp">
                <p v-if="taskObj.stateName==='待分配'" style="text-align: left" class="gray-tint-color">{{taskObj.typeName}}·待接单</p>
                <p v-else-if="taskObj.stateName==='被退回'" style="text-align: left" class="gray-tint-color">{{taskObj.typeName}}·处理中</p>
                <p v-else-if="taskObj.status==='99'" style="text-align: left" class="gray-tint-color">{{taskObj.typeName}}·{{taskObj.statusName}}</p>
                <p v-else style="text-align: left" class="gray-tint-color">{{taskObj.typeName}}·{{taskObj.stateName}}</p>
                <p v-if="taskObj.lastUpdateTime!==''" class="gray-tint-color" style="text-align: left">{{taskObj.lastUpdateTime}}</p>
                <p v-if="taskObj.operateTime!==''" class="gray-tint-color" style="text-align: left">{{taskObj.operateTime}}</p>
            </div>
        </div>
        <div v-if="taskObj.type==='warning'" v-bind:class="classTaskObject" @click="richHandler(taskObj)" v-bind:style="{backgroundImage: 'url(\''+warningImage+ '\')'}">
            <p style="text-align: left;margin-left: 0.4rem;color: #9a9a9a" v-html="showTaskContent"></p>
            <!--<p style="text-align: left;margin-left: 0.4rem;margin-right:0.4rem;color: #9a9a9a">{{showTaskContent}}</p>-->
        </div>
        <div v-else-if="taskObj.type==='inspection'" v-bind:class="classTaskObject" @click="richHandler(taskObj)" v-bind:style="{backgroundImage: 'url(\'' + inspectionImage + '\')'}">
            <p style="text-align: left;margin-left: 0.4rem;color: #9a9a9a" v-html="showTaskContent"></p>
            <!--<p style="text-align: left;margin-left: 0.4rem;margin-right:0.4rem;color: #9a9a9a">{{showTaskContent}}</p>-->
        </div>
        <div v-else v-bind:class="classTaskObject" @click="richHandler(taskObj)">
            <!--<p style="text-align: left;margin-left: 0.4rem;color: #9a9a9a" v-html="showTaskContent"></p>-->
            <p style="text-align: left;margin-left: 0.4rem;margin-right:0.4rem;color: #9a9a9a">{{showTaskContent}}</p>
        </div>
        <slot name="slot"/>
    </div>
</template>

<script>
    import util from '../util.js';
    export default {
        name: "richTextComponent",
        data() {
            return {
                warningImage: require('../assets/task_warnning_bg.png'),
                inspectionImage: require('../assets/task_inspection_bg.png'),
            }
        },
        props: {
            taskObj: {
                lastUpdateTime: '',
                startTime: '',
                state: '',
                stateName: '',
                type: '',
                typeName: '',
                description: '',
                vouchers: [],
                commodities: [],

                name:'',
                operateTime: '',
                source: '',
                status: '',
                statusName:'',
                uuid:'',
                userUuid: '',
                isReplaced: '0'
            },
        },
        created() {
            if (this.taskObj.lastUpdateTime === undefined) {
                this.taskObj.lastUpdateTime = '';
            } else {
                if (this.taskObj.lastUpdateTime === null || this.taskObj.lastUpdateTime === '') {
                } else {
                    var lastTime = this.taskObj.lastUpdateTime;
                    this.taskObj.lastUpdateTime = util.substringTime(lastTime);
                }
            }
            if (this.taskObj.operateTime === undefined) {
                this.taskObj.operateTime = '';
            } else {
                if (this.taskObj.operateTime === null || this.taskObj.operateTime === '') {
                } else {
                    var operateTime = this.taskObj.operateTime;
                    this.taskObj.operateTime = util.substringTime(operateTime);
                }
            }
        },
        computed: {
            classTaskObject: function () {
                return {
                    'rich-warning-part':this.taskObj.type === 'warning',
                    'rich-inspection-part':this.taskObj.type === 'inspection',
                    'rich-supplies-part':this.taskObj.type === 'commodity',
                    'rich-voucher-part':this.taskObj.type === 'voucher',
                    'rich-sysmsg-part': this.taskObj.type ==='message'
                }
            },
            showTaskContent: function () {
                if (this.taskObj.type === 'message') {
                    return util.getTaskStateContent(this.taskObj.type,this.taskObj.description,this.taskObj.startTime);
                } else if (this.taskObj.type === 'commodity') {
                    var commodityStr = '';
                    for (var i=0;i<this.taskObj.commodities.length;i++) {
                        commodityStr += this.taskObj.commodities[i].name+this.taskObj.commodities[i].brand+this.taskObj.commodities[i].type_no;
                    }
                    if (commodityStr.length > 80) {
                        commodityStr = commodityStr.substring(0,80);
                        commodityStr = commodityStr + '...';
                    }
                    return commodityStr;
                } else if (this.taskObj.type === 'voucher') {
                    var voucherStr = '';
                    for (var i=0;i<this.taskObj.vouchers.length;i++) {
                        if (i < this.taskObj.vouchers.length) {
                            voucherStr += this.taskObj.vouchers[i].name;
                        }
                    }
                    if (voucherStr.length > 80) {
                        voucherStr = voucherStr.substring(0, 80);
                        voucherStr = voucherStr + '...';
                    }
                        return voucherStr;
                } else {
                    if (this.taskObj.status === undefined) {
                        return util.getTaskStateContent(
                            this.taskObj.type,this.taskObj.stateName,this.taskObj.startTime,
                            this.taskObj.uuid,this.taskObj.userUuid,this.taskObj.name,
                            this.taskObj.isReplaced);
                    } else {
                        return util.getTaskStateContent(
                            this.taskObj.type,this.taskObj.statusName,this.taskObj.startTime,
                            this.taskObj.uuid,this.taskObj.userUuid,this.taskObj.name,
                            this.taskObj.isReplaced);
                    }
                    return util.getTaskStateContent(
                        this.taskObj.type,this.taskObj.stateName,this.taskObj.startTime,
                        this.taskObj.uuid,this.taskObj.userUuid,this.taskObj.name,
                        this.taskObj.isReplaced);
                }
            }
        },
        methods: {
            richHandler(taskObj) {
                this.$emit('rich-handler',{taskObj: taskObj})
            }
        }
    }
</script>

<style lang="scss">
    .rich-text-layout {
        background: #ffffff;

        .rich-title-part {
            display: flex;
            align-items: center;
            padding-left: 0.4rem;
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;

            .rich-logo-part {
                width: 0.6rem;
                height: 0.6rem;
            }
        }

        /*设备报修*/
        .rich-warning-part {
            height: 2rem;
            display: flex;
            align-items: center;
            /*background-image: url("../assets/task_warnning_bg.png");*/
            background-repeat: no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size:cover;
        }

        /*场地巡检*/
        .rich-inspection-part {
            height: 2rem;
            display: flex;
            align-items: center;
            /*background: url("../assets/task_inspection_bg.png");*/
            background-repeat: no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        /*办公用品*/
        .rich-supplies-part {
            height: 2rem;
            display: flex;
            align-items: center;
            background: #ddeefd;
            background-repeat: no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        /*凭证请领*/
        .rich-voucher-part {
            height: 2rem;
            display: flex;
            align-items: center;
            background: #ddeefd;
            background-repeat: no-repeat;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        /*系统消息*/
        .rich-sysmsg-part {
            display: flex;
            align-items: center;
            background: #ffffff;
            height: 1.4rem;
        }

    }
</style>